/*******************************
 * Global css stuff
 *******************************/
 
@pulseAnimation: pulse 700ms linear 0 infinite alternate;

@-webkit-keyframes pulse {
	0%{ background-color: rgba(255, 255, 255, 0.5); border-color: rgba(0, 0, 0, .5); }
	100% { background-color: rgba(255, 255, 255, 1); border-color: rgba(0, 0, 0, .8); }
}
@-moz-keyframes pulse {
	0%{ background-color: rgba(255, 255, 255, 0.5); border-color: rgba(0, 0, 0, .5); }
	100% { background-color: rgba(255, 255, 255, 1); border-color: rgba(0, 0, 0, .8); }
}
@keyframes pulse {
	0%{ background: rgba(255, 255, 255, 0.5); border-color: rgba(0, 0, 0, .5); }
	100% { background: rgba(255, 255, 255, 1); border-color: rgba(0, 0, 0, .8); }
}


@pereNoelAnimation: pereNoel 3000ms linear 0 1 normal forwards;

@-webkit-keyframes pereNoel {
	0%{ top: 150px; left: 110%; opacity: 0; }
	1%{ opacity: 1; }
	99% { opacity: 1; }
	100% { top: -130px; left: -10%; opacity: 0; }
}
@-moz-keyframes pereNoel {
	0%{ top: 150px; left: 110%; opacity: 0; }
	1%{ opacity: 1; }
	99% { opacity: 1; }
	100% { top: -130px; left: -10%; opacity: 0; }
}
@keyframes pereNoel {
	0%{ top: 150px; left: 110%; opacity: 0; }
	1%{ opacity: 1; }
	99% { opacity: 1; }
	100% { top: -130px; left: -10%; opacity: 0; }
}


@cadeauAnimation: cadeau 2500ms linear 0 1 normal forwards;

@-webkit-keyframes cadeau {
	0%{ top: 20px; left: 50%; opacity: 0; }
	60% { top: 20px; left: 50%; opacity: 0;	}
	61% { top: 50px; left: 50%; opacity: 1; }
	100% { top: 220px; left: 50%; }
}
@-moz-keyframes cadeau {
	0%{ top: 20px; left: 50%; opacity: 0; }
	60% { top: 20px; left: 50%; opacity: 0;	}
	61% { top: 50px; left: 50%; opacity: 1; }
	100% { top: 220px; left: 50%; }
}
@keyframes cadeau {
	0%{ top: 20px; left: 50%; opacity: 0; }
	60% { top: 20px; left: 50%; opacity: 0;	}
	61% { top: 50px; left: 50%; opacity: 1; }
	100% { top: 220px; left: 50%; }
}

/*******************************
 * Général
 *******************************/

html {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	overflow-x: hidden;
}

body {
	color: #333;
	font-family: "Lucida Grande", Verdana, "Bitstream Vera Sans", sans-serif;
	font-size: .8em;
	line-height: 1.25;
	background-image: url(../img/bg.jpg);
	margin: 0;
}

a {
	color: #000;
	.border-radius(10px);
	padding: 0 0.3em;
	border: 1px solid transparent;
}
a:hover {
	text-decoration: none;
	color: #fff;
	background: rgba(0, 0, 0, .3);
	border-color: #f77;
	.linear-gradient-top(#aaa, #faa, 0%, #f77, 100%);
}

.clearer {
	clear: both;
}

input:invalid {
	background: rgba(255, 255, 255, 0);
}

button {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
}

a.button {
	background: none;
	border: none;
	color: inherit;
	cursor: pointer;
	text-decoration: none;
}

#phylactere {
	font: normal 12px "Lucida Grande", Verdana, "Bitstream Vera Sans", sans-serif;
	position: absolute;
	top: 75px;
	left: 50%;
	
	.phylactere-pointe {
		position: relative;
		top: 1px;
		background: url(../img/philactere-pointe.png) 15px bottom no-repeat;
		height: 20px;
	}
	
	.phylactere-message {
		background: #fff;
		padding: 5px;
		border: 1px solid #333;
		.border-radius(10px);
		.box-shadow(0 3px 20px rgba(0,0,0,0.7));
	}
}

/*******************************
 * Mise en page
 *******************************/

#container {
	width: 750px;
	margin: auto;
	.box-shadow(0 3px 50px rgba(0,0,0, 1));
	border-left: 2px solid #fff;
	border-right: 2px solid #fff;
}

#header {
	position: relative;
	border-bottom: 2px solid #fff;
	background: #fff url('../img/bgHeader.png') repeat left top;
	height: 150px;
}

#content {
	padding: 15px;
	background: #fff;
	background: rgba(255, 255, 255, 0.93);
}

h2 {
	font-size: 1.4em;
	margin-top: 0;
}

.aDroiteDuH2 {
	float: right;
	position: relative;
	top: -2.6em;
}

h2.centered {
	text-align: center;
	font-size: 1.6em;
}

.aside {
	float: right;
	margin: 20px;
}

/*******************************
 * Header
 *******************************/

#header {
	border-bottom: 1px solid #ddd;

	h1 {
		.text-shadow(2px 2px 0px #000);
		color: #fff;
		text-align: left;
		margin: 0;
		padding: 45px 0 0 30px;
	}
	
	#headerMenu {
		position: absolute;
		top: 10px;
		right: 10px;
		text-align: right;
		list-style-type: none;
		line-height: 1.7em;
		font-size: 0.8em;
		margin: 0;
		
		a {
			color: #fff;
			font-weight: bold;
			.text-shadow(1px 1px 0px #000);
		}
	}
}

/*******************************
 * Index
 *******************************/

.index {
	
	#phylactere {
		font: normal 12px "Lucida Grande", Verdana, "Bitstream Vera Sans", sans-serif;
		position: absolute;
		top: 75px;
		left: 50%;
		width: 300px !important;
		margin-left: -150px !important;
		text-align: center;
		
		.phylactere-pointe {
			display: none;
		}
		
		.phylactere-message {
			background: #fff;
			padding: 5px;
			border: 1px solid #333;
			.border-radius(10px);
			.box-shadow(0 3px 20px rgba(0,0,0,0.7));
		}
	}
	
	form {
		position: absolute;
		top: 50%;
		left: 50%;
		border: 5px solid #fff;
		padding: 10px;
		width: 270px;
		margin-left: -150px;
		height: 187px;
		margin-top: -110px;
		.border-radius(10px);
		.box-shadow(0 3px 50px rgba(0,0,0,0.5));
		background: #fff;
		.linear-gradient-top(transparent, rgba(255,255,255,0.8), 0%, rgba(255,255,255,0.9), 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccffffff', endColorstr='#e6ffffff',GradientType=0 );
		
		h1 {
			text-align: center;
			margin-bottom: 25px;
		}
		
		p {
			padding-left: 7px;
			margin-bottom: 15px;
		}
		
		fieldset {
			border: 2px solid #fff;
			background: #fff;
			background: rgba(255,255,255,0.6);
			padding: 0;
			padding-bottom: 7px;
			.border-radius(10px);
		}
		
		.lienInscription {
			float: left;
			margin: 14px 0 0 5px;
		}
		
		label {
			display: block;
			padding: 10px;
		}
		
		input {
			float: right;
		}
		
		input {
			width: 130px;
		}
		
		input[type=submit] {
			width: auto;
			margin-right: 10px;
		}
	}
}

/*******************************
 * Partie
 *******************************/

.plateau {
	margin: 20px;
	padding: 5px;
	.box-shadow(0 2px 10px rgba(0,0,0,0.7));
	.border-radius(20px);
	background-image: url('../img/alu.jpg');
	
	td {
		padding: 3px;
	}
}

#arbreJetons {
	background: url('../img/tree.png') no-repeat left top;
	float: right;
	width: 400px;
	height: 414px;
	position: relative;
	
	.jeton {
		position: absolute !important;
	}
	
	/* Positions des jetons en tant que boules de noël */
	#jeton1 { top: 228px; left: 115px; }
	#jeton2 { top: 127px; left: 125px; }
	#jeton3 { top: 283px; left: 169px; }
	#jeton4 { top: 162px; left: 195px; }
	#jeton5 { top: 323px; left: 50px; }
	#jeton6 { top: 40px; left: 145px; }
	#jeton7 { top: 287px; left: 112px }
	#jeton8 { top: 207px; left: 165px; }
	#jeton9 { top: 333px; left: 130px; }
	#jeton10 { top: 90px; left: 165px; }
	#jeton11 { top: 326px; left: 256px; }
	#jeton12 { top: 268px; left: 219px; }
}

/* Représente un emplacement et est extended par jeton */
.numbeur {
	cursor: default;
	display: block;
	text-align: center;
	width: 22px;
	height: 22px;
	line-height: 24px;
	font-size: 0.9em;
	padding: 3px;
	border: 1px solid rgba(0, 0, 0, .5);
	background: rgba(255, 255, 255, .5);
	.border-radius(1337px);
}

.numbeur.droppable {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .8);
	.animation(@pulseAnimation);
}

.jeton {
	.numbeur;
	z-index: 100;
	width: 24px;
	height: 24px;
	background: url('../img/redBall.png');
	border: none;
	color: white;
}

.jetonActif {
	.jeton;
	background: url('../img/blueBall.png');
}

.ui-state-disabled {
	opacity: 1;
}

.draggable {
	cursor: pointer;
	cursor: grab;
	cursor: -moz-grab;
	cursor: -webkit-grab;
}
.grabbed {
	cursor: pointer;
	cursor: grabbing;
	cursor: -moz-grabbing;
	cursor: -webkit-grabbing;
}

#pereNoel {
	position: absolute;
	margin-left: -68px;
	width: 136px;
	height: 150px;
	z-index: 100;
	opacity: 0;
	background: url('../img/flyingSanta.png');
	.animation(@pereNoelAnimation);
}

#cadeau {
	position: absolute;
	top: 220px;
	left: 50%;
	margin-left: -32px;
	width: 64px;
	padding-top: 23px;
	height: 41px;
	background: url('../img/cadeau.png');
	color: #fff;
	font-size: 2em;
	text-align: center;
	font-weight: bold;
	.text-shadow(1px 1px 0px #000);
	.animation(@cadeauAnimation);
}

/*******************************
 * Inscription
 *******************************/

.inscription {
	form {
		width: 25em;
		margin: auto;
	}
	
	fieldset {
		border: none;
	}
	
	label {
		display: block;
		padding: 10px;
	}
	
	input {
		float: right;
		width: 130px;
	}
	
	input[type=submit] {
		width: auto;
		margin-top: 10px;
		margin-right: 10px;
	}
}

/*******************************
 * Dashboard
 *******************************/

.dashboard {
	#statistiques {
		background: rgba(255, 255, 255, .5);
		border: 2px solid #555;
		.border-radius(10px);
		padding: 5px;
		min-width: 170px;
		
		caption {
			font-size: 1.4em;
			margin-bottom: 5px;
		}
		
		td {
			padding: 3px;
		}
	}
	
	ul {
		list-style-type: none;
		padding: 0 0 0 30px;
		
		li {
			line-height: 42px;
			
			img {
				vertical-align: middle;
				position: relative;
				top: -3px; /* corrige un décalage inexpliqué */
				margin-right: 5px;
			}
		}
	}
	
	#boutonNouvellePartie {
		line-height: 32px;
		font-size: 1.4em;
		display: inline-block;
		margin: 20px;
		
		img {
			vertical-align: middle;
			margin-right: 5px;
			position: relative;
			top: -3px; /* corrige un décalage inexpliqué */
		}
	}
	
	#boutonNouvellePartie:hover {
		font-weight: bold;
	}
}

/*******************************
 * Autres pages
 *******************************/

#donneesPartieEnAttente{
	min-width: 300px;
	margin: auto;
	
	td {
		vertical-align: top;
		padding: 5px;
	}
	
	td:last-child {
		text-align: right;
	}
}

#listeResultats {
	padding: 0;
	margin: 40px 0 0 0;
	list-style-type: none;

	li {
		display: inline-block;
		width: 49%;
		
		table {
			margin: 20px auto;
			
			caption {
				text-align: left;
				height: 30px;
				padding: 0 5px;
				
				span {
					float: right;
					
					.imgVictoire {
						position: relative;
						top: -7px;
					}
				}
			}
		}
	}
}



//---------------------------------------------------
//  LESS Prefixer
//---------------------------------------------------
//
//  All of the CSS3 fun, none of the prefixes!
//
//  As a rule, you can use the CSS properties you
//  would expect just by adding a '.':
//
//  box-shadow => .box-shadow(@args)
//
//  Also, when shorthand is available, arguments are
//  not parameterized. Learn CSS, not LESS Prefixer.
//
//  -------------------------------------------------
//  TABLE OF CONTENTS
//  (*) denotes a syntax-sugar helper
//  -------------------------------------------------
//
//      .animation(@args)
//          .animation-delay(@delay)
//          .animation-direction(@direction)
//          .animation-duration(@duration)
//          .animation-fill-mode(@mode)
//          .animation-iteration-count(@count)
//          .animation-name(@name)
//          .animation-play-state(@state)
//          .animation-timing-function(@function)
//      .background-size(@args)
//      .border-radius(@args)
//      .box-shadow(@args)
//          .inner-shadow(@args) *
//      .box-sizing(@args)
//          .border-box() *
//          .content-box() *
//      .columns(@args)
//          .column-count(@count)
//          .column-gap(@gap)
//          .column-rule(@args)
//          .column-width(@width)
//      .gradient(@default,@start,@stop) *
//          .linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,[@color3,@stop3,@color4,@stop4])*
//          .linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,[@color3,@stop3,@color4,@stop4])*
//      .opacity(@factor)
//      .transform(@args)
//          .transform-origin(@args)
//          .transform-style(@style)
//          .rotate(@deg)
//          .scale(@factor)
//          .translate(@x,@y)
//          .translate3d(@x,@y,@z)
//          .translateHardware(@x,@y) *
//      .text-shadow(@args)
//      .transition(@args)
//          .transition-delay(@delay)
//          .transition-duration(@duration)
//          .transition-property(@property)
//          .transition-timing-function(@function)
//
//
//
//  Credit to LESS Elements for the motivation and
//  to CSS3Please.com for implementation.
//
//  Copyright (c) 2012 Joel Sutherland
//  MIT Licensed:
//  http://www.opensource.org/licenses/mit-license.php
//
//---------------------------------------------------


// Animation

.animation(@args) {
    -webkit-animation: @args;
    -moz-animation: @args;
    -ms-animation: @args;
    -o-animation: @args;
    animation: @args;
}
.animation-delay(@delay) {
    -webkit-animation-delay: @delay;
    -moz-animation-delay: @delay;
    -ms-animation-delay: @delay;
    -o-animation-delay: @delay;
    animation-delay: @delay;
}
.animation-direction(@direction) {
    -webkit-animation-direction: @direction;
    -moz-animation-direction: @direction;
    -ms-animation-direction: @direction;
    -o-animation-direction: @direction;
}
.animation-duration(@duration) {
    -webkit-animation-duration: @duration;
    -moz-animation-duration: @duration;
    -ms-animation-duration: @duration;
    -o-animation-duration: @duration;
}
.animation-fill-mode(@mode) {
    -webkit-animation-fill-mode: @mode;
    -moz-animation-fill-mode: @mode;
    -ms-animation-fill-mode: @mode;
    -o-animation-fill-mode: @mode;
    animation-fill-mode: @mode;
}
.animation-iteration-count(@count) {
    -webkit-animation-iteration-count: @count;
    -moz-animation-iteration-count: @count;
    -ms-animation-iteration-count: @count;
    -o-animation-iteration-count: @count;
    animation-iteration-count: @count;
}
.animation-name(@name) {
    -webkit-animation-name: @name;
    -moz-animation-name: @name;
    -ms-animation-name: @name;
    -o-animation-name: @name;
    animation-name: @name;
}
.animation-play-state(@state) {
    -webkit-animation-play-state: @state;
    -moz-animation-play-state: @state;
    -ms-animation-play-state: @state;
    -o-animation-play-state: @state;
    animation-play-state: @state;
}
.animation-timing-function(@function) {
    -webkit-animation-timing-function: @function;
    -moz-animation-timing-function: @function;
    -ms-animation-timing-function: @function;
    -o-animation-timing-function: @function;
    animation-timing-function: @function;
}


// Background Size

.background-size(@args) {
    -webkit-background-size: @args;
    background-size: @args;
}


// Border Radius

.border-radius(@args) {
	-webkit-border-radius: @args;
    border-radius: @args;

    background-clip: padding-box;
}


// Box Shadows

.box-shadow(@args) {
    -webkit-box-shadow: @args;
    box-shadow: @args;
}
.inner-shadow(@args) {
    .box-shadow(inset @args);
}


// Box Sizing

.box-sizing(@args) {
    -webkit-box-sizing: @args;
    -moz-box-sizing: @args;
    box-sizing: @args;
}
.border-box(){
    .box-sizing(border-box);
}
.content-box(){
    .box-sizing(content-box);
}


// Columns

.columns(@args) {
    -webkit-columns: @args;
    -moz-columns: @args;
    columns: @args;
}
.column-count(@count) {
    -webkit-column-count: @count;
    -moz-column-count: @count;
    column-count: @count;
}
.column-gap(@gap) {
    -webkit-column-gap: @gap;
    -moz-column-gap: @gap;
    column-gap: @gap;
}
.column-width(@width) {
    -webkit-column-width: @width;
    -moz-column-width: @width;
    column-width: @width;
}
.column-rule(@args) {
    -webkit-column-rule: @args;
    -moz-column-rule: @args;
    column-rule: @args;
}


// Gradients

.gradient(@default: #F5F5F5, @start: #EEE, @stop: #FFF) {
    .linear-gradient-top(@default,@start,0%,@stop,100%);
}
.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2) {
    background-color: @default;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2 @color2));
    background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2);
    background-image: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2);
    background-image: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2);
    background-image: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2);
    background-image: linear-gradient(top, @color1 @stop1, @color2 @stop2);
}
.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3) {
    background-color: @default;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3));
    background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
    background-image: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
    background-image: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
    background-image: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
    background-image: linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
}
.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3,@color4,@stop4) {
    background-color: @default;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3), color-stop(@stop4 @color4));
    background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
    background-image: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
    background-image: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
    background-image: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
    background-image: linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
}
.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2) {
    background-color: @default;
    background-image: -webkit-gradient(linear, left top, left top, color-stop(@stop1, @color1), color-stop(@stop2 @color2));
    background-image: -webkit-linear-gradient(left, @color1 @stop1, @color2 @stop2);
    background-image: -moz-linear-gradient(left, @color1 @stop1, @color2 @stop2);
    background-image: -ms-linear-gradient(left, @color1 @stop1, @color2 @stop2);
    background-image: -o-linear-gradient(left, @color1 @stop1, @color2 @stop2);
    background-image: linear-gradient(left, @color1 @stop1, @color2 @stop2);
}
.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3) {
    background-color: @default;
    background-image: -webkit-gradient(linear, left top, left top, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3));
    background-image: -webkit-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
    background-image: -moz-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
    background-image: -ms-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
    background-image: -o-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
    background-image: linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
}
.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3,@color4,@stop4) {
    background-color: @default;
    background-image: -webkit-gradient(linear, left top, left top, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3), color-stop(@stop4 @color4));
    background-image: -webkit-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
    background-image: -moz-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
    background-image: -ms-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
    background-image: -o-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
    background-image: linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
}


// Opacity

.opacity(@factor) {
    @iefactor: @factor*100;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=@{iefactor})";
	filter: ~"alpha(opacity=(@{iefactor}))";
    opacity: @factor;
}


// Text Shadow

.text-shadow(@args) {
    text-shadow: @args;
}


// Transforms

.transform(@args) {
    -webkit-transform: @args;
    -moz-transform: @args;
    -ms-transform: @args; 
    -o-transform: @args;
    transform: @args;
}
.transform-origin(@args) {
    -webkit-transform-origin: @args;
    -moz-transform-origin: @args;
    -ms-transform-origin: @args; 
    -o-transform-origin: @args;
    transform-origin: @args;
}
.transform-style(@style) {
    -webkit-transform-style: @style;
    -moz-transform-style: @style;
    -ms-transform-style: @style; 
    -o-transform-style: @style;
    transform-style: @style;
}
.rotate(@deg:45deg){
    .transform(rotate(@deg));
}
.scale(@factor:.5){
    .transform(scale(@factor));
}
.translate(@x,@y){
    .transform(translate(@x,@y));
}
.translate3d(@x,@y,@z) {
    .transform(translate3d(@x,@y,@z));
}
.translateHardware(@x,@y) {
    .translate(@x,@y);
    -webkit-transform: translate3d(@x,@y,0);
    -moz-transform: translate3d(@x,@y,0);
    -o-transform: translate3d(@x,@y,0);
    -ms-transform: translate3d(@x,@y,0);
    transform: translate3d(@x,@y,0);
}


// Transitions

.transition(@args:200ms) {
    -webkit-transition: @args;
    -moz-transition: @args;
    -o-transition: @args;
    -ms-transition: @args;
    transition: @args;
}
.transition-delay(@delay:0) {
    -webkit-transition-delay: @delay;
    -moz-transition-delay: @delay;
    -o-transition-delay: @delay;
    -ms-transition-delay: @delay;
    transition-delay: @delay;
}
.transition-duration(@duration:200ms) {
    -webkit-transition-duration: @duration;
    -moz-transition-duration: @duration;
    -o-transition-duration: @duration;
    -ms-transition-duration: @duration;
    transition-duration: @duration;
}
.transition-property(@property:all) {
    -webkit-transition-property: @property;
    -moz-transition-property: @property;
    -o-transition-property: @property;
    -ms-transition-property: @property;
    transition-property: @property;
}
.transition-timing-function(@function:ease) {
    -webkit-transition-timing-function: @function;
    -moz-transition-timing-function: @function;
    -o-transition-timing-function: @function;
    -ms-transition-timing-function: @function;
    transition-timing-function: @function;
}